<template>
	<template v-if="isAlready">
		<template v-if="drag">
			<div class="mainDragList">
				<draggable class="dragModuleDragAreaClass" v-model="module.widgets" animation="300"
						   :style="'height:'+ dragAreaHeight+'px;'"
						   item-key="id" :group="{name:'widgets'}"
						   @change="dragChange">
					<template #item="{ element }">
						<ex-drag-widget :model="model" :widgets="module.widgets" :widget="element"
										drag></ex-drag-widget>
					</template>
				</draggable>
			</div>
		</template>
		<template v-else>
			<ex-drag-widget v-for="element in module.widgets" :model="model" :widgets="module.widgets"
							:widget="element"></ex-drag-widget>
		</template>
	</template>
</template>
<script>

import draggable from "vuedraggable";
import ExDragWidget from "@/views/asset/card/module/widget/index.vue";

export default {
	name: "mEmpty",
	components: {ExDragWidget, draggable},
	props: {
		model: {type: Object, default: {}},
		modules: {type: Array, default: []},
		module: {type: Object, default: null},
		drag: {type: Boolean, default: false},
	},
	data() {
		return {
			isAlready: false,
			dragAreaHeight: 400,
		}
	},
	created() {
		this.isAlready = true;
	},
	methods: {
		dragChange: function (event) {
			if (event.added) {
				let copyElement = this.$TOOL.objCopy(event.added.element);
				this.module.widgets = this.module.widgets.filter(item => item.id !== copyElement.id);
				copyElement.id = null;
				this.module.widgets.push(copyElement);
			}
			this.module.widgets.forEach((item, index) => {
				item.orderWeight = index;
			})
		},
	}
}
</script>
<script setup>
</script>
